.markdown-body {
    pre {
        margin: 15px 0;

        code.hljs {
            border-radius: 10px;
            font-weight: 400;
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply text-black transition-colors;
    }

    h1 {
        @apply text-2xl my-6 pb-3 border-b border-[#eee];

        // &::before {
        //     content: "✨️";
        //     @apply pr-3;
        // }
    }

    h2 {
        @apply relative text-lg my-8 pl-5;

        &::before {
            content: "";
            @apply absolute left-0 top-[50%] -translate-y-1/2 w-2 h-full bg-primary;
        }
    }

    h3 {
        @apply relative text-lg my-5 pl-5;

        &::before {
            content: "#";
            @apply absolute left-0 top-[50%] -translate-y-1/2 text-primary;
        }
    }

    h4,
    h5,
    h6 {
        @apply relative text-lg my-3;
    }

    hr {
        @apply my-5 border-[#eee] transition-colors;
    }

    p code,
    ul code {
        @apply bg-[rgba(13,110,253,0.1)] dark:bg-[#334052] text-[#0d6efd] rounded-md py-1 px-2 text-sm transition-colors;
    }

    li {
        @apply my-2.5 list-decimal ml-14;
    }

    a {
        @apply text-primary
    }

    p {
        @apply leading-9 mb-2;

        img {
            @apply rounded-xl cursor-pointer transition-all;
        }
    }

    strong {
        @apply text-base;
    }

    table {
        @apply w-full;

        th {
            @apply bg-[#f1f7fd];
        }

        tr,
        th,
        td {
            @apply border-[#eee] p-[10px_20px];
        }
    }

    input[type="checkbox"] {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        position: relative;
        cursor: not-allowed;
    }
}